<style scoped>
.red {
  color: #EE0A24;
}

.grey {
  color: #bbb;
}

.container {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>

<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">用户注册</p>
    </van-nav-bar>
    <van-form>
      <van-field v-model="username" name="username" label="手机号" placeholder="请输入手机号" autocomplete="off"/>
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" autocomplete="off"/>
      <div style="margin: 16px;">
        <van-button @click="register" round block color="#F70D00" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { NavBar, Col, Row, Form, Field, Button } from 'vant'
import { requestToRegister } from '../../api/user'

Vue.use(NavBar)
Vue.use(Col)
Vue.use(Row)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)

export default {
  name: 'LoginWithPwd',
  data () {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations({
      changeActive: 'tabs/doActive'
    }),
    register () {
      if (!this.checkForm()) {
        this.$notify('输入不得为空！')
        return
      }
      requestToRegister({
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.code === 200) {
          this.$toast({
            type: 'success',
            message: '注册成功'
          })
          setTimeout(() => {
            this.$router.back()
          }, 1500)
        } else {
          this.$toast({
            type: 'success',
            message: res.msg
          })
        }
      })
    },
    checkForm () {
      return this.password && this.username
    },
    back () {
      this.$router.back()
    }
  }
}
</script>
